<template>
  <div class="searchList">
    <Header>
      <div slot="left" @click="goBack()">
        <i class="iconfont icon-fanhui-xianxing"></i>
      </div>
      <div slot="center">
        <form action="" onSubmit="return false;" @keyup.enter="find()">
          <input type="search" placeholder="请输入关键字" v-model="key" />
        </form>
      </div>
      <div slot="right">
        <i class="iconfont icon-sousuo"></i>
      </div>
    </Header>
    <nav-menu></nav-menu>
    <section>
      <shop-list :list="list"></shop-list>
    </section>
  </div>
</template>

<script>
import Header from "@/components/common/Header";
import NavMenu from "@/components/searchlist/NavMenu";
import ShopList from "../../components/searchlist/ShopList.vue";
import BetterScroll from "better-scroll";

export default {
  name: "SearchList",
  data() {
    return {
      key: "",
      BetterScroll: null,
      list: [],
    };
  },
  components: {
    Header,
    NavMenu,
    ShopList,
  },
  methods: {
    find() {},
    refresh() {
      this.BetterScroll.refresh();
    },
    goBack() {
      this.$router.go(-1);
    },
    getShopList() {
      this.$http
        .$axios({
          url: "/api/shopList?key=" + this.key,
        })
        .then((res) => {
          // console.log(res);
          this.list = res.data.data;
        })
        .catch((err) => {
          console.log("请求出错了" + err);
        });
    },
  },
  created() {
    this.key = this.$route.query.key;
    this.getShopList();
  },
  mounted() {
    this.$nextTick(() => {
      this.BetterScroll = new BetterScroll("section", {
        click: true,
      });
    });
  },
  updated() {
    this.refresh();
  },
};
</script>

<style scoped lang="scss">
.searchList {
  width: 100vw;
  height: 100vh;
  padding-top: 1.173333rem;
}
section {
  position: absolute;
  top: 2.08rem;
  bottom: 0;
  overflow: hidden;
}
</style>